<template>
    <div class="main">
        <div class="header">
            <img src="@/assets/zuojiantou.png" alt="" @click="handleBack">
        </div>
        <van-swipe :autoplay="3000" style="height: 361px;">
            <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" style="width: 100%;height: 361px;" />
            </van-swipe-item>
        </van-swipe>
        <div style="background-color: #fff;">
            <p class="title">{{ productInfo.title }}</p>
            <p class="price"><span>￥{{ skusDefalut.price }}</span>  <del>{{ skusDefalut.market_price }}</del></p>
            <div class="count">
                <p>销量：{{ skusDefalut.sold_count }}个</p>
                <p>库存：{{ skusDefalut.stock }}个</p>
            </div>
        </div>
        <van-cell title="购买类型" @click="handleShow"  is-link :value="skusDefalut.value"/>
        <van-action-sheet v-model="show">
            <div class="content">
                <div class="c-top">
                    <img :src="images[0]" alt="">
                    <ul>
                        <li>{{ skusDefalut.price }}</li>
                        <li>库存：{{ skusDefalut.stock }} 个</li>
                        <li>已选：{{ skusDefalut.value }}</li>
                    </ul>
                </div>
                    <div class="c-select" v-for="(item,index) in attrGroup" :key="index">
                        <p class="title">{{ item }}</p>
                        <ul>
                            <li  ref="options" v-for="(sub,i) in attrItems[index]" :key="i" 
                            @click="handleSelect(sub)" >
                                {{ sub }}
                            </li>
                        </ul>
                    </div>
                    <div class="c-stepper">
                        <span>数量</span>
                        <van-stepper v-model="count_num" theme="round" button-size="20" disable-input />
                    </div>
                    <van-button  block round size="small" color="#fa436a" @click="handleDone">完成</van-button>
            </div>
        </van-action-sheet>
        <van-cell title="数量">
            <van-stepper v-model="count_num" theme="round" button-size="20" disable-input />
        </van-cell>
        <div class="reviews">
            <div class="r-header">
                <span>评论<i style="color:#909399;font-size: 14px;">({{ reviews.total }})</i></span>
                <span style="color:#909399;font-size: 14px;">好评率：{{ reviews.good_review }}</span>
            </div>
            <div class="r-content">没有了</div>
        </div>

        <div class="imgDetail">
            <span>————</span>
                图文详情
            <span>————</span>
        </div>
        <van-goods-action>
            <van-goods-action-icon icon="wap-home" text="首页" to="/"/>
            <van-goods-action-icon icon="cart" text="购物车" to="/cart"/>
            <van-goods-action-icon icon="like" @click="handleFavorite"  text="收藏" :color="productInfo.favorite==0?'':'#fa436a'"/>
            <van-goods-action-button type="warning" text="加入购物车" @click="handleAddCart"/>
            <van-goods-action-button type="danger" text="立即购买" @click="handleBuy" />
        </van-goods-action>
    </div>
</template>
<script>
import {queryProdById,getReviews} from "@/api/product"
import {favorite} from "@/api/favorite"
import {addCart} from "@/api/cart"
export default {
   data() {
      return {
        images:[],
        productInfo:{},
        show:false,
        skus:[],
        skusDefalut:{
            price:0,
            stock:0,
            value:"",
            market_price:0,
            sold_count:0,
        },
        attrItems:[],
        attrGroup:[],
        befArr:[],
        aftArr:[],
        skus_value:"",
        count_num:0,
        reviews:{},
        favoriteinfo:{
            id:0,
            state:0
        },
        skusId:0
      }
   },
   created(){
        let {id} = this.$route.query;
        this.handleGoodsInfo({id});
        getReviews(this.$route.query).then(res=>{
            this.reviews = res.data.data;
        })
   },
   computed:{
       
   },
   watch:{
    skus_value(val){
          let [skus] = this.skus.filter(item=> item.value == val);
          this.skusDefalut = skus;
          this.skusId =  skus.id;
    }
   },
   methods:{
    handleBuy(){
        this.$router.push({path:"/createOrder",query:{quantity:this.count_num,sku_id:this.skusId}});
    },
    handleAddCart(){
        addCart({quantity:1,sku_id:this.skusId}).then(res=>{
            if(res.data.code == 1){
                this.$toast.success("加入成功")
            }else{
                this.$router.push("/login")
            }
        })
    },
    handleGoodsInfo({id}){
        queryProdById({id}).then(res=>{
            this.productInfo = res.data.data;
            this.images = res.data.data.image;
            this.skus = res.data.data.skus;
            this.skusDefalut = this.skus[0];
            this.attrItems = res.data.data.attrItems;
            this.attrGroup = res.data.data.attrGroup;
            this.befArr.push(this.skusDefalut.value.split(",")[0]);
            this.aftArr.push(this.skusDefalut.value.split(",")[1]);
            this.skus_value = this.skus[0].value;
            this.favoriteinfo.id=id;
        })
    },
    handleFavorite(){
        if(this.favoriteinfo.state){
            this.favoriteinfo.state = 0;
        }else{
            this.favoriteinfo.state = 1;
        }
        favorite(this.favoriteinfo).then(res=>{
            if(res.data.code != 1){
                this.$router.push("/login")
            }
        });
        let {id} = this.favoriteinfo
        this.handleGoodsInfo({id})
    },
    handleOptions(){
        this.$nextTick(()=>{
            let lis = [...this.$refs.options];
            if(this.attrItems.length>1){
                let [beflis,aftlis] = this.attrItems;
                let befs = lis.slice(0,beflis.length);
                let afts = lis.slice(beflis.length);
                let attrs = this.skus_value.split(",");
                let arr = []
                attrs.forEach(item=>{
                    if(beflis.indexOf(item)!=-1){
                        arr.push(beflis.indexOf(item))
                    }
                    if(aftlis.indexOf(item)!=-1){
                        arr.push(aftlis.indexOf(item))
                    }
                })
                befs[arr[0]].className = "active";
                afts[arr[1]].className = "active";
            }else{
                let [beflis] = this.attrItems;
                let befs = lis.slice(0,beflis.length);
                let arr = [];
                let attrs = this.skus_value.split(",");
                attrs.forEach(item=>{
                    if(beflis.indexOf(item)!=-1){
                        arr.push(beflis.indexOf(item))
                    }
                })
                befs[arr[0]].className = "active";
            }
        })
    },
    handleShow(){
        this.show = true; 
        this.handleOptions();
    },
    handleSelect(sub){
        let lis = [...this.$refs.options];
            if(this.attrItems.length>1){
                let [beflis,aftlis] = this.attrItems;
                let befs = lis.slice(0,beflis.length);
                let afts = lis.slice(beflis.length);
                if(beflis.indexOf(sub)!=-1){
                    for(let i=0;i<befs.length;i++){
                        befs[i].className = ""
                    }
                    befs[beflis.indexOf(sub)].className = "active";
                    this.befArr.shift();
                    this.befArr.push(sub);
                }
                if(aftlis.indexOf(sub)!=-1){
                    for(let i=0;i<afts.length;i++){
                        afts[i].className = ""
                    }
                    afts[aftlis.indexOf(sub)].className = "active";
                    this.aftArr.shift();
                    this.aftArr.push(sub);
                }
                this.skus_value = [...this.befArr,...this.aftArr].join(",");
            }else{
                let [beflis] = this.attrItems;
                let befs = lis.slice(0,beflis.length);
                if(beflis.indexOf(sub)!=-1){
                    for(let i=0;i<befs.length;i++){
                        befs[i].className = ""
                    }
                    befs[beflis.indexOf(sub)].className = "active";
                    this.befArr.shift();
                    this.befArr.push(sub);
                }
                this.skus_value = [...this.befArr].join(",");
            }
        },
        handleDone(){
            this.show = false;
        },
        handleBack(){
            this.$router.go(-1)
        }
   },
}
</script>
<style scoped>
    .main{
        position: relative;
        background-color: #F8F8F8;
    }
    .header{
        position: fixed;
        left: 10px;
        top: 10px;
        z-index: 1;
    }

    .header img{
        width: 40px;
        height: 40px;
    }
    .van-goods-action{
        width: 90%;
        margin: 20px auto;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
        border-radius: 5px;
    }
    .title{
        width: 90%;
        height: 50px;
        margin: 5px auto;
        line-height: 25px;
    }
    .price{
        width: 90%;
        height: 20px;
        margin: 10px auto;
    }
    .price span{
        color: #FB436A;
        font-size: 17px;
        margin-right: 5px;
    }
    .price del{
        color: #909399;
        font-size: 13px;
    }
    .count{
        width: 90%;
        height: 25px;
        margin: 5px auto;
        display: flex;
        justify-content: flex-start;
        font-size: 12px;
        color: #909399;
    }
    .count p{
        width: 50%;
    }
    .content {
        padding: 16px 16px 10px;
    }
    .content .c-top{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .content .c-top img{
        width: 85px;
        height: 85px;
    }
    .content .c-top ul{
        margin: 0 20px;        
    }
    .c-top li{
        margin: 5px 0;
        font-size: 14px;
    }
    .c-top li:first-child{
        color: #fa436a;
    }
    .c-select .title{
        width: 95%;
        height: 20px;
        margin: 10px auto;
    }
    .c-select ul{
        width: 95%;
        height: 50px;
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .c-select ul li{
        width: 62px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        border-radius: 15px;
        background-color: #eee;
        margin-right: 5px;
        padding: 0 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
     .c-select ul .active{
        background-color: #fbebee;
        color: #fa436a;
    }
    .c-stepper{
        width: 95%;
        margin: 15px auto;
        display: flex;
    }
    .c-stepper span{
        margin-right: 10px;
    }
    .reviews{
        width: 100%;
        height: 91px;
        margin: 10px 0;
        background-color: #fff;
        overflow: hidden;
    }
    .reviews .r-header{
        width: 90%;
        height: 20px;
        margin: 10px auto;
        display: flex;
        justify-content: space-between;
    }
    .reviews .r-content{
        width: 90%;
        height: 50px;
        margin: 0 auto;
        text-align: center;
        line-height: 50px;
        font-size: 14px;
    }
    .imgDetail{
        width: 100%;
        height: 200px;
        background-color: #fff;
        text-align: center;
        color: #303133;
    }
    .imgDetail span{
        color: #CCCCCC;
    }
</style>
